<template>
  <div style="margin: 10px calc(10px + 3%)">
    <!-- 标题等 -->
    <v-row>
      <v-col :cols="12" :lg="8">
        <v-text-field  label="标题" v-model="article.title"></v-text-field>
      </v-col>
      <v-col :cols="6" :lg="4">
        <v-text-field label="作者" v-model="article.author"></v-text-field>
      </v-col>
      <v-col :cols="6" :lg="4">
        <v-select label="分类" :items="classes" item-value="classId" item-text="name" v-model="article.classId"></v-select>
      </v-col>
      <v-col :cols="6" :lg="4">
        <v-select label="状态" :items="state" item-value="value" item-text="text" v-model="article.state"></v-select>
      </v-col>

      <v-col :cols="6" :lg="4">
        <v-select label="标签"  multiple :items="tags" item-value="tagId" item-text="tagName" v-model="article.tags"></v-select>
      </v-col>

      <v-col :cols="12">
        <v-textarea :rows="2" no-resize auto-grow label="简介" v-model="article.description"></v-textarea>
      </v-col>
    </v-row>

    <!-- 文章内容 -->
    <mavon-editor ref="md" v-model="article.content" @save="save" @imgAdd="imgAdd" @imgDel="imgDel" style="z-index: 0; min-height: 60vh; margin-bottom: 40px" :boxShadow="false" :toolbarsFlag="widthLevel > 2" :subfield="widthLevel > 2"></mavon-editor>

    <!-- 固定项 -->
    <div style="position: fixed; right: 5%; bottom: 5%; padding: 5px; background-color: rgb(241, 242, 247)">
      <v-btn color="blue lighten-1" outlined @click="create" style="display: block;"><v-icon class="mr-1">mdi-folder-plus-outline</v-icon>新建</v-btn>
      <v-btn color="red" :loading="loading.cancel" outlined @click="cancel" style="display: block;"><v-icon class="mr-1">mdi-cancel</v-icon>取消</v-btn>
      <v-btn color="green lighten-1" :loading="loading.save" outlined @click="save" style="display: block;"><v-icon class="mr-1">mdi-content-save</v-icon>保存</v-btn>
      <v-btn color="blue lighten-1" :disabled="$route.params.articleId != -1" :loading="loading.issue" outlined @click="issue" style="display: block;"><v-icon class="mr-1">mdi-publish</v-icon>发布</v-btn>
    </div>
  </div>
</template>

<script>
import Http from "../api/http";

export default {
  name: "Article",


  data: ()=>{
    return {
      article: {},
      classes: [
        {
          classId: 1,
          name: "学习笔记"
        },
        {
          classId: 2,
          name: "采坑记录"
        },
        {
          classId: 3,
          name: "闲时杂谈"
        },
        {
          classId: 4,
          name: "转载记录"
        },
        {
          classId: 5,
          name: "其他文章"
        }
      ],
      state: [
        {
          value: 0,
          text: '草稿'
        },
        {
          value: 1,
          text: '发布'
        },
        {
          value: 2,
          text: '修订'
        },
      ],
      tags: [],
      loading: {
        cancel: false,
        save: false,
        issue: false
      }
    }
  },


  props: {
    widthLevel: Number
  },


  methods: {
    create(){
      this.article = {
        title: '',
        description: '',
        tags: '',
        content: '',
        classId: '',
        pageView: 0,
        thumbNumber: 0,
        commentNumber: 0,
        state: 0,
        author: '',
      };
      this.$router.push("/article/-1")
    },

    cancel(){
      if(this.$route.params.articleId != -1&&this.$route.params.articleId != ""){
        this.loading.cancel = true;
        Http.get("/article/"+this.$route.params.articleId).then(data=>{
          if(data.code == 1){
            this.article = data.result;
            this.article.tags = this.article.tags.map(tag=>tag.tagId);
          }else {
            this.$emit("childerror",data.message);
          }
          this.loading.cancel = false;
        }).catch(fail=>{
          this.$emit("childerror","服务端发生错误");
          console.error(fail);
          this.loading.cancel = false;
        })
      }else {
        this.article = {
          title: '',
          description: '',
          tags: '',
          content: '',
          classId: '',
          pageView: 0,
          thumbNumber: 0,
          commentNumber: 0,
          state: 0,
          author: '',
        }
      }
    },

    save(){
      // 1.参数检测
      if(this.article.tags == ''||this.article.classId == ''||this.article.content == ''||this.article.author == ''||this.article.title == ''){
        this.$emit("childerror", "有必要信息未填写");
        return ;
      }

      // 2.修改标签并设置
      this.article.tags = this.article.tags.map(p=>{
        let result = null;
        this.tags.forEach(tag=>{
          if(p == tag.tagId){
            result = tag;
            return;
          }
        })
        return result;
      })
      this.loading.save = true;

      // 3.根据页面状态决定是修改还是新建
      if(this.$route.params.articleId != -1){

        // 更新
        Http.put("/article/article", this.article).then(data=>{
          if(data.code == 1){
          }else {
            this.$emit("childerror", data.message);
          }
          this.loading.save = false;
        }).catch(fail=>{
          this.$emit("childerror", "服务端发送错误")
          console.error(fail);
          this.loading.save = false;
        })
      }else {

        // 插入
        Http.post("/article/article", this.article).then(data=>{
          if(data.code == 1){
          }else {
            this.$emit("childerror", data.message);
          }
          this.loading.save = false;
        }).catch(fail=>{
          this.$emit("childerror", "服务端发送错误")
          console.error(fail);
          this.loading.save = false;
        })
      }
    },

    issue(){
      // 1.参数检测
      if(this.article.tags == ''||this.article.classId == ''||this.article.content == ''||this.article.author == ''||this.article.title == ''){
        this.$emit("childerror", "有必要信息未填写");
        return ;
      }
      // 2.修改标签并设置
      this.article.tags = this.article.tags.map(p=>{
        let result = null;
        this.tags.forEach(tag=>{
          if(p == tag.tagId){
            result = tag;
            return;
          }
        })
        return result;
      })
      this.article.state = 1;
      this.loading.issue = true;

      console.log(this.article);

      // 3.插入
      Http.post("/article/article", this.article).then(data=>{
        if(data.code == 1){
        }else {
          this.$emit("childerror", data.message);
        }
        this.loading.issue = false;
      }).catch(fail=>{
        this.$emit("childerror", "服务端发送错误")
        console.error(fail);
        this.loading.issue = false;
      })
    },

    imgAdd(index, file){
      console.log("-----imgadd------"+index);

      // 1.创建文件
      let formdata = new FormData();
      formdata.append('file', file);

      // 2.发送请求并替换文件URL
      Http.post("/file/image", formdata, {
        headers: {'Content-Type': 'multipart/form-data'}
      }).then(data=>{
        if(data.code == 1){
          this.$refs.md.$img2Url(index, data.result);
        }else {
          this.$emit("childerror",data.message);
        }
      }).catch(fail=>{
        this.$emit("childerror","服务端发生错误");
        console.error(fail);
      })
    },

    imgDel(index){
      Http.delete("/file/image", {
        params: {
          "key": index[0]
        }
      }).then(data=>{
        if (data.code != 1){
          this.$emit("childerror", data.message);
        }
      }).catch(fail=>{
        this.$emit("childerror", "服务端发送错误");
        console.error(fail);
      })
    }
  },


  activated() {
    // 1.开启加载状态
    this.$emit("childloadingevent", true);

    // 2.获取标签
    Http.get("/tag/tags").then(data=>{
      if(data.code == 1){
        this.tags = data.result;
      }else {
        this.$emit("childerror",data.message);
      }
      this.$emit("childloadingevent", false);
    }).catch(fail=>{
      this.$emit("childerror","服务端发生错误");
      console.error(fail);
      this.$emit("childloadingevent", false);
    })

    // 3.获取文章
    if(this.$route.params.articleId != -1&&this.$route.params.articleId != ""){
      Http.get("/article/"+this.$route.params.articleId).then(data=>{
        if(data.code == 1){
          this.article = data.result;
          this.article.tags = this.article.tags.map(tag=>tag.tagId);
          console.log(this.article);
          console.log(data.result);
        }else {
          this.$emit("childerror",data.message);
        }
      }).catch(fail=>{
        this.$emit("childerror","服务端发生错误");
        console.error(fail);
      })
    }else {
      this.article = {
        title: '',
        description: '',
        tags: '',
        content: '',
        classId: '',
        pageView: 0,
        thumbNumber: 0,
        commentNumber: 0,
        state: 0,
        author: '',
      }
    }
  }
}
</script>

<style scoped>

</style>